<template>
  <div class="card">
    <h2 class="text-lg font-bold">一般公共预算收入及增速</h2>
    <div class="chart-container bg-white rounded-lg shadow p-2 pb-5">
      <LineChart :data="budgetChartData" :options="budgetChartOptions" class="w-full h-48" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 历史数据 (2021-2024年)
const historicalData = ref([255.06, 265.56, 264.36, 265.3])
const years = ref([2021, 2022, 2023, 2024])

// 预测函数 - 使用线性回归进行预测
const predictBudget = () => {
  const n = historicalData.value.length
  let sumX = 0
  let sumY = 0
  let sumXY = 0
  let sumX2 = 0

  for (let i = 0; i < n; i++) {
    sumX += years.value[i]
    sumY += historicalData.value[i]
    sumXY += years.value[i] * historicalData.value[i]
    sumX2 += years.value[i] * years.value[i]
  }

  // 计算线性回归参数
  const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX)
  const intercept = (sumY - slope * sumX) / n

  // 预测2025年数据
  return slope * 2025 + intercept
}

// 初始化图表数据
const initChartData = () => {
  const predictedValue = predictBudget()

  return {
    labels: ['2021年', '2022年', '2023年', '2024年', '2025年(预测)'],
    datasets: [
      {
        label: '一般公共预算收入',
        data: [...historicalData.value, predictedValue],
        borderColor: 'rgba(0, 123, 255, 1)',
        backgroundColor: 'rgba(0, 123, 255, 0.2)',
        fill: true,
        borderDash: [0, 0, 0, 0, 5, 5], // 最后一段线条使用虚线
        pointBackgroundColor: (context) => {
          // 预测点使用不同颜色
          return context.dataIndex === historicalData.value.length
            ? 'rgba(255, 99, 132, 1)'
            : 'rgba(0, 123, 255, 1)'
        },
      },
    ],
  }
}

// 一般公共预算收入及增速图表
const budgetChartData = ref(initChartData())

const budgetChartOptions = ref({
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    x: {
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
      },
      ticks: {
        color: '#666',
      },
    },
    y: {
      beginAtZero: true,
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
      },
      ticks: {
        color: '#666',
        callback: function (value) {
          return value + '亿' // 左侧y轴显示"亿"单位
        },
      },
    },
  },
  plugins: {
    legend: {
      labels: {
        color: '#333',
      },
    },
    tooltip: {
      mode: 'index',
      intersect: false,
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      titleColor: '#333',
      bodyColor: '#666',
      borderColor: 'rgba(200, 200, 200, 1)',
      borderWidth: 1,
      padding: 10,
      boxPadding: 5,
      usePointStyle: true,
      callbacks: {
        label: function (context) {
          let label = context.dataset.label || ''
          if (label) {
            label += ': '
          }
          if (context.parsed.y !== null) {
            label += context.parsed.y.toFixed(2) + '亿'
            if (context.dataIndex === historicalData.value.length) {
              label += ' (预测)'
            }
          }
          return label
        },
      },
    },
  },
})
</script>

<style scoped>
.chart-container {
  height: 200px; /* 设置固定高度 */
}
</style>
